<template>
  <div>
    <router-view :key="$route.fullPath"></router-view>
    <!--   使用router-view组件可以方便地实现路由切换和视图展示。-->
    <!--    经常和<router-link to="/">Home</router-link>链接搭配使用-->

    <van-tabbar v-model="active" :placeholder="true">

      <van-tabbar-item name="home" icon="home-o" @click="gotoIndex"
      >首页</van-tabbar-item
      >
      <van-tabbar-item name="search" icon="search" @click="gotoSearch"
      >搜索</van-tabbar-item
      >


      <van-tabbar-item
          name="cart"
          icon="cart-o"
          :badge="num == 0 ? '' : num"
          @click="gotoCart"
      >
        购物车</van-tabbar-item
      >

      <van-tabbar-item name="star" icon="star-o" @click="gotoCollect"
      >收藏</van-tabbar-item
      >
      <van-tabbar-item name="friends" icon="user-o" @click="gotoPerson"
      >我的</van-tabbar-item
      >
    </van-tabbar>
    <!--      在上述代码中，我们使用了van-tabbar组件来创建一个底部导航栏。-->
    <!--      通过v-model指令将active属性绑定到当前选中的tab索引上。-->
    <!--      每个van-tabbar-item代表一个tab项，-->
    <!--      其中icon属性指定了tab的图标，title属性指定了tab的标题。-->
  </div>
</template>
<script setup>
import { onMounted, ref } from "vue";
//从Vue.js中导入`onMounted`和`ref`两个函数。`onMounted`
//用于在组件挂载后执行某些操作，`ref`用于创建响应式引用对象。
import { useRouter } from "vue-router";
//从Vue Router中导入`useRouter`函数，用于获取当前路由实例。
import { showDialog } from "vant";

//从Vant UI库中导入`showDialog`函数，用于显示对话框。
import { userStore } from "../store/piniaStore";
//从Pinia Store中导入`userStore`，这是一个自定义的状态管理库。
import { storeToRefs } from "pinia";
//从Pinia中导入`storeToRefs`函数，用于将Pinia Store中的状态属性转换为响应式引用对象。


const useUserStore = userStore();
// 这段代码是调用`userStore`函数并将其返回值赋值给变量`useUserStore`。
//
// `userStore`函数可能是一个自定义的 Vuex store，用于管理用户相关的状态和数据。
// 通过调用`userStore`函数，可以获取到该 store 的实例，以便在 Vue 组件中进行状态管理和数据传递。
//
// `useUserStore`变量被赋值为`userStore`函数的返回值，即用户相关的 Vuex store 实例。

const router = useRouter();
// 使用Vue.js框架中的`useRouter`函数来获取当前路由实例，并将其赋值给变量`router`。
//
// `useRouter`函数用于在 Vue 组件中获取当前的路由实例，以便进行路由跳转、参数传递等操作。
// 通过使用`useRouter`函数，可以在 Vue 组件中方便地访问和操作路由实例。

//`router`变量被赋值为当前路由实例，可以通过该变量来进行路由跳转、参数传递等操作。


const { num, cartNum } = storeToRefs(useUserStore);
//这段代码是使用Vue.js框架中的storeToRefs函数来将useUserStore中的状态属性转换为响应式引用对象，并将其解构赋值给变量num和cartNum。

//storeToRefs函数用于将一个 Vuex store 中的状态属性转换为响应式引用对象，以便在 Vue 组件中进行双向绑定和跟踪变化。通过使用storeToRefs函数，可以方便地访问和修改 Vuex store 中的状态属性。
//useUserStore是一个 Vuex store，它包含了用户相关的状态属性。通过使用storeToRefs函数，将useUserStore中的状态属性num和cartNum转换为响应式引用对象，
//并将其分别赋值给变量num和cartNum。这样，在 Vue 组件中就可以直接使用这两个变量来访问和修改num和cartNum的值，实现动态更新用户信息的功能。

let active = ref("home");
//这段代码是使用Vue.js框架中的ref函数来创建一个响应式引用对象，并将其赋值给变量active。ref函数用于将一个普通值转换为响应式数据，以便在Vue组件中进行双向绑定和跟踪变化。

//在这个例子中，active被初始化为字符串"home"，表示当前激活的页面或组件是"home"。当active的值发生变化时，Vue会自动检测到这个变化并更新相关的视图。

//通过使用ref函数创建的响应式引用对象，可以在Vue组件中方便地访问和修改active的值，从而实现动态导航或切换不同的页面或组件。

function gotoIndex() {
  router.push("index");
}
//这段代码是一个JavaScript函数，名为gotoSearch()。
// 它的作用是使用router.push()方法将用户导航到名为"search"的路由页面。
function gotoSearch() {
  router.push("search");
}
//这段代码是一个JavaScript函数，名为gotoSearch()。
//它的作用是使用router.push()方法将用户导航（跳转）到名为"search"的路由页面。
function gotoCart() {
  //指的是用户从商品浏览页面跳转到购物车页面的操作。
  router.push("cart");//是购物车的URL路径
}
function gotoPerson() {
  router.push("person");
}
//这段代码是一个JavaScript函数，名为gotoPerson()。
// 它的作用是使用router.push()方法将用户导航到名为"person"的路由页面。
function gotoCollect() {
  router.push("collect");
}
//这段代码是一个JavaScript函数，名为gotoCollect()。
// 它的作用是使用router.push()方法将用户导航到名为"collect"的路由页面。
</script>
